<template>
	<!-- 新增的地址选择器 -->
	<view>
		<view class="addres_new">
			<view class="addres_item a-line" @click="provinceClick" :class="businessFrom.province ? '' : 'color_e7'">
				{{ businessFrom.province ? businessFrom.province : '请选择省' }}
			</view>
			<view class="addres_item a-line" @click="cityClick" :class="businessFrom.city ? '' : 'color_e7'">
				{{ businessFrom.city ? businessFrom.city : '请选择市' }}
			</view>
			<view class="addres_item a-line" @click="areaClick" :class="businessFrom.area ? '' : 'color_e7'">
				{{ businessFrom.area ? businessFrom.area : '请选择区' }}
			</view>
		</view>

		<u-picker :show="addressPShow" :columns="addressPColumns" keyName="label" :loading="addressLoading"
			@cancel="addressPShow=false" @confirm="addressPConfirm"></u-picker>
		<u-picker :show="addressCShow" :columns="addressCColumns" keyName="label" :loading="addressLoading"
			@cancel="addressCShow=false" @confirm="addressCConfirm"></u-picker>
		<u-picker :show="addressAShow" :columns="addressAColumns" keyName="label" :loading="addressLoading"
			@cancel="addressAShow=false" @confirm="addressAConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		props: ["businessFrom"],
		data() {
			return {
				addressPColumns: [],
				addressCColumns: [],
				addressAColumns: [],
				addressPShow: false,
				addressCShow: false,
				addressAShow: false,
				addressLoading: false,
			};
		},

		methods: {
			addressPConfirm(e) {
				e.logo = 1
				this.$emit('addresChange', JSON.stringify(e))
				this.addressPShow = false
			},
			addressCConfirm(e) {
				e.logo = 2
				this.$emit('addresChange', JSON.stringify(e))
				this.addressCShow = false
			},
			addressAConfirm(e) {
				e.logo = 3
				this.$emit('addresChange', JSON.stringify(e))
				this.addressAShow = false
			},
			provinceClick() {
				this.addressLoading = true
				this.addressPShow = true
				this.getProvince()
			},
			cityClick() {
				if(!this.businessFrom.province_code){
					return this.toast('请先选择省份')
				}
				this.addressLoading = true
				this.addressCShow = true
				this.getCity()
			},
			areaClick() {
				if(!this.businessFrom.province_code){
					return this.toast('请先选择省份')
				}
				if(!this.businessFrom.city_code){
					return this.toast('请先选择市')
				}
				this.addressLoading = true
				this.addressAShow = true
				this.getArea()
			},
			getProvince() {
				this.ajax("index/getProvince", {
					data: {},
					success: (res) => {
						this.addressPColumns = [res.msg];
						this.addressLoading = false
					}
				})
			},
			getCity() {
				this.ajax("index/getCity", {
					data: {
						code: this.businessFrom.province_code,
					},
					success: (res) => {
						this.addressCColumns = [res.msg];
						this.addressLoading = false
					}
				})
			},
			getArea() {
				this.ajax("index/getArea", {
					data: {
						code: this.businessFrom.city_code,
					},
					success: (res) => {
						this.addressAColumns = [res.msg];
						this.addressLoading = false
					}
				})
			},
		},
	}
</script>

<style scoped lang="less">
	.addres_new {
		width: 510rpx;
		height: 100%;
		margin-left: 20rpx;
		display: flex;

		.addres_item {
			flex: 1;
			text-align: center;
			margin-left: 20rpx;
		}

		.color_e7 {
			color: #e1e1e7;
		}
	}
</style>